<template>
  <!-- 修改用户 -->
  <section class="component modify-resource">
    <el-form :model="modifyModel" ref="modifyResource-form" label-width="100px" align="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源名称" prop="name">
            <el-input v-model="modifyModel.name" size="small" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源路由" prop="url">
            <el-input v-model="modifyModel.url" size="small" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源顺序" prop="resoSort">
            <el-input v-model="modifyModel.resoSort" size="small" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源类型" prop="type">
            <el-select v-model="modifyModel.type" clearable>
              <el-option v-for="{index,name,code} in $dict.getDictData('ResourceType')" :key="index" :label="name"
                         :value="code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源父节点" prop="parentId">
            <el-input v-model="modifyModel.parentId" size="small" :maxlength="25"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item scope="scope" label-width="0px" align="center">
        <el-button @click="modifyUserCancel">取消</el-button>
        <el-button @click="commit">确定</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import {Dependencies} from "~/core/decorator";
    import {Getter, State} from "vuex-class";
    import {UserService} from "~/services/management-service/user.service";
    import {Emit, Prop} from "vue-property-decorator";
    import clone from "clone";
    import {ResourceService} from "~/services/management-service/resource.service";

    @Component({
        components: {}
    })
    export default class ModifyUser extends Vue {
        @Dependencies(UserService)
        private userService: UserService;
        @Prop()
        private deptId: any;
        @Prop()
        private user: any;
        @State
        private companyList: any;
        @State
        private departmentList: any;
        @Getter
        private departmentData;

        @Dependencies(ResourceService)
        private resourceService: ResourceService
        private modifyModel: any = {
            name: "",
            url: "",
            resoSort: "",
            type: "",
            parentId: "",
            id: ""
        };


        private deptIds: any = [];

        @Emit("refreshList")
        public refreshList() {
        }

        @Emit("close")
        public close() {
        }

        public reset() {
            const modifyForm: any = this.$refs["modifyUser-form"];
            modifyForm.resetFields();
        }

        public refresh(obj) {
            this.modifyModel = clone(obj);
            this.modifyModel.deptType = obj.deptType;
            this.deptIds = [];
            this.getDeptIds(this.user.deptId);
        }

        /**
         * 机构改变
         */
        private orgChange() {
            if (this.deptIds.length < 1) {
                return;
            }
            const deptId = this.deptIds[this.deptIds.length - 1];
            const deptModel: any = this.departmentList.find(x => x.id === deptId);
            // this.modifyModel.department = deptModel;
            this.modifyModel.deptId = deptModel.id;
            this.modifyModel.deptName = deptModel.deptName;
            this.modifyModel.deptType = deptModel.deptType;
        }

        private getDeptIds(id: string) {
            const dept = this.departmentList.find(x => x.id === id);
            if (dept) {
                this.deptIds.unshift(id);
                this.getDeptIds(dept.parentId);
            }
        }

        /**
         * 新增用户取消
         */
        private modifyUserCancel() {
            //   重置form表单
            const addForm: any = this.$refs["modifyResource-form"];
            addForm.resetFields();
            this.deptIds = [];
            //   关闭dialog
            this.$emit("close");
        }

        private commit() {
            this.resourceService.createResource(this.modifyModel).subscribe(
                (data) => {
                    //   重置form表单xr
                    const addForm: any = this.$refs['modifyResource-form'];
                    addForm.resetFields();
                    //   关闭dialog
                    this.$emit('close');
                    this.$message.success('成功!');
                    //   刷新databox
                    this.$emit('refresh');
                }
            );
        }
    }
</script>

<style lang="less" scoped>
</style>
